<template>
    <div v-if="type === 'line'" class="pe-progress">
        <div class="pe-progress-bar" :style="{ height: `${strokeWidth}px`, borderRadius: `${strokeWidth / 2}px` }">
            <div v-if="!indeterminate" class="pe-progress-bar-inner"
                :class="[striped ? 'pe-progress-bar-striped' : '', stripedFlow ? 'pe-progress-bar-striped-flow' : '']"
                :style="{ width: `${percentage}%`, borderRadius: `${strokeWidth / 2}px`, backgroundColor: getBgColor(), animationDuration: `${duration}s` }">
                <span v-if="textInside && showText">{{ percentage }}%</span>
            </div>
            <div v-else class="pe-progress-bar-indeterminate"
                :style="{ borderRadius: `${strokeWidth / 2}px`, backgroundColor: getBgColor(), animationDuration: `${duration}s` }">
            </div>
        </div>
        <div v-if="!textInside && showText">
            <slot>
                {{ percentage }}%
            </slot>
        </div>
    </div>
    <div v-else class="pe-progress-circle" :style="{ width: `${width}px`, height: `${width}px` }">
        <template v-if="type === 'circle'">
            <svg viewBox="0 0 100 100">
                <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke="#e5e9f2" stroke-linecap="round" stroke-width="4.8" fill="none"
                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path>
                <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " :stroke="getBgColor()" fill="none" :opacity="percentage === 0 ? 0 : 1" stroke-linecap="round"
                    stroke-width="4.8"
                    :style="{ strokeDasharray: `${percentage * 295.31 / 100}px, 295.31px`, strokeDashoffset: '0px', transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s, opacity 0.6s ease 0s' }">
                </path>
            </svg>
        </template>

        <template v-else>
            <svg viewBox="0 0 100 100">
                <path d="
          M 50 50
          m 0 47
          a 47 47 0 1 1 0 -94
          a 47 47 0 1 1 0 94
          " stroke="#e5e9f2" stroke-linecap="round" stroke-width="4.8" fill="none"
                    style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: -36.9137px;"></path>
                <path d="
          M 50 50
          m 0 47
          a 47 47 0 1 1 0 -94
          a 47 47 0 1 1 0 94
          " :stroke="getBgColor()" fill="none" :opacity="percentage === 0 ? 0 : 1" stroke-linecap="round"
                    stroke-width="4.8"
                    :style="{ strokeDasharray: `${percentage * 221.482 / 100}px, 295.31px`, strokeDashoffset: '-36.9137px', transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s, opacity 0.6s ease 0s' }">
                </path>
            </svg>
        </template>
        <div class="pe-progress-circle-content">
            <slot>
                {{ percentage }}%
            </slot>
        </div>
    </div>
</template>

<script setup lang="ts">

/**
 * @param percentage 百分比
 * @param type 进度条类型
 * @param stroke-width 进度条的宽度
 * @param text-inside 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用）
 * @param status 进度条当前状态
 * @param indeterminate 是否为动画进度条
 * @param duration 控制动画进度条速度和条纹进度条流动速度
 * @param color 进度条背景色 （会覆盖 status 状态颜色）
 * @param show-text 是否显示进度条文字内容
 * @param width 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）
 * @param striped 在进度条上增加条纹
 * @param striped-flow 让进度条上的条纹流动起来
 */
interface Props {
    percentage: number,
    type?: 'line' | 'circle' | 'dashboard',
    strokeWidth?: number,
    textInside?: boolean,
    status?: 'primary' | 'success' | 'exception' | 'warning',
    indeterminate?: boolean,
    duration?: number,
    color?: string
    showText?: boolean,
    width?: number,
    striped?: boolean,
    stripedFlow?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    percentage: 0,
    type: "line",
    strokeWidth: 6,
    textInside: false,
    status: "primary",
    indeterminate: false,
    duration: 3,
    showText: true,
    width: 126,
    striped: false,
    stripedFlow: false
})

const getBgColor = () => {
    let color = "var(--pe-color-primary)"
    if (props.status === 'success') {
        color = "var(--pe-color-success)"
    } else if (props.status === "exception") {
        color = "var(--pe-color-error)"
    } else if (props.status === 'warning') {
        color = "var(--pe-color-warning)"
    }
    if (props.color) {
        color = props.color
    }
    return color
}
</script>

<script lang="ts">
export default {
    name: "pe-progress"
}
</script>